<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            background: url(img/bodyimg1.jpg) no-repeat left top;
            background-size:100%;
            background-attachment:fixed;
        }
        .nc_scale {
            background: #e8e8e8 !important;
        }
        .nc_scale div.bc_bg {
            background: #7ac23c !important;
        }
        .nc_scale .scale_text2 {
            color: #fff !important;
        }
        .nc_scale span {
            border: 1px solid #ccc !important;
        }
        .errloading {
            border: #faf1d5 1px solid !important;
            color: #ef9f06 !important;
        }
    </style>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .container-1 {
            vertical-align: middle;
            background-color: #fff;
            padding: 40px 80px 30px;
            position: relative;
            height: 600px;
            width: 600px;
            margin: auto;
            border: 1px black solid;
            margin-top: 80px;
            opacity:0.9;
        }

        .container-2, .container-3 {
            vertical-align: middle;
            text-align: center;
        }

        .ip-1, .ip-2 {
            height: 50px;
            outline: none;
            resize: none;
            font-size: 20px;
            width: 360px;

        }
        .ip-3{
            height: 50px;
            font-size: 20px;
            width: 170px;
            float: left;
        }

        .ip-4 {
            height: 50px;
            width: 360px;
            background-color: #b9def0;
            color: white;
            font-size: 20px;
            font-weight: bolder;
        }

        input {
            margin: 0;
            padding: 0;
            outline: none;
            resize: none;
            font-size: 14px;
        }

        .p-1 {
            font-size: 40px;
        }

        .p-left {
            float: left;
        }

        .p_right {
            float: right;
            color: #b9def0;
        }

        .container-3 {
            margin-top: 30px;
        }
        .alert {
            margin: 0 auto;
            padding: 6px 10px;
            border: 1px solid transparent;
            text-align: left;
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
            margin-bottom: 17px;
            font-size: 12px;
            width: 360px;
        }
        .role{
            color: blue;

        }
        .checkdiv{
            border: 1px #f36c79 solid;
            background-color: #f5d7d7;
            margin-top: 0px;
            width: 360px;
            height: 30px;
            margin-left: 39px;
            display: none;
            font-size: 18px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<div class="container-1">
    <div class="container-2">
        <img src="img/logo.png" alt="..." class="" width="250px" height="100px">
    </div>
    <div class="container-3">
        <form id="formregister">
            <div class="form-group">
                <input type="text"  placeholder="用户名" class="ip-1" name="username" id="username">
                <br>
                <div class="checkdiv" id="checkdiv">
                    <span id="c-msg"></span>
                </div>
            </div>
            <br>
            <div class="form-group">
                <input type="password"  placeholder="密码" class="ip-2" name="password" id="password">
            </div>
            <br>
            <div class="form-group">职业：
                <label><input name="job" type="radio" value="研究/博士生" />研究/博士生</label>
                <label><input name="job" type="radio" value="大学生" />大学生 </label>
                <label><input name="job" type="radio" value="高学生" />高中生</label>
                <label><input name="job" type="radio" value="初学生" />初中生</label>
                <label><input name="job" type="radio" value="小学生"  />小学生</label>
                <label><input name="job" type="radio" value="工作" />工作</label>
                <label><input name="job" type="radio" value="其它" />其它</label>
            </div>
            <br>
            <div class="form-group role">
               <input name="confirm" type="checkbox" onclick="agree();" id="cb" size="100"/><lable for="cb">我同意使用说明，使用说明见首页</lable>
            </div>
            <br>
            <button type="button" name="submit1" value="提交" disabled="disabled" id="bsubmit" class="btn btn-default ip-4" >注册</button>
        </form>
    </div>
</div>
<script>
    function agree(){
        if(document.getElementById('cb').checked)
            document.getElementById('bsubmit').disabled=false;
    else
        document.getElementById('bsubmit').disabled='disabled';
    }
    $("#bsubmit").click(function () {
        $.post("user/register",$("#formregister").serialize(),function (data) {
            if (data.register){
                alert(data.message);
            }
            else {
                location.href="index.html";
            }
        },"json")
    })
</script>
<script>
     $(function () {
         $("#username").blur(function () {
             var username = $(this).val();
             $.get("user/check",{username:username},function (data) {
                 var span=$("#c-msg");
               if (data.checkUser){
                   $("#checkdiv").attr("style","display:block;");
                   $("#checkdiv").css("border","1px green solid");
                   $("#checkdiv").css("background-color","#98FB98");
                   span.css("color","green");
                   span.html(data.msg);
               }
               else {
                   $("#checkdiv").attr("style","display:block;");
                   span.css("color","#f36c79");
                   span.html(data.msg);
               }
             },"json")
             });
     });
</script>
</body>
</html>